<template>
  <div class="page detail">
    <custom title="订单详情" is-back />
    <div class="form">
      <div class="formView">
        <div class="flex justify-sb formTit">
          <div>订单编号：2569523641</div>
          <div class="formTitR">已完成</div>
        </div>
        <div class="formTit">下单时间：2018-08-13 18:31:28</div>
        <div class="formTit">收货信息：宇少先生   138****9831</div>
        <div class="formTit">广西壮族自治区 柳州市 城中区 西一巷66号606室</div>
        <div class="formTit formTitM">物流公司：顺丰快递</div>
        <div class="formTit" style="margin:0;">物流单号：57456765879</div>
      </div>
    </div>
    <div class="shop">
      <div class="flex align-center shopTop">
        <img src="@/assets/integralOrderComplete/shop.png" alt="" class="shopTopImg" />
        <div>王善无</div>
      </div>
      <div class="shopCont">
        <div class="flex shopBox" style="margin:0;">
          <img src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/166711/5/20789/102338/6084c98aEd1fd5116/0ce2ba968d83589e.jpg!q80.dpg" alt="" class="shopImg" />
          <div class="shopDetail">
            <div class="flex justify-sb">
              <div class="shopDetailTit">文具盒</div>
              <div class="shopDetailPrice">¥ 497.90</div>
            </div>
            <div class="flex justify-sb shopDetailNum">
              <div>大 蓝色</div>
              <div>x1</div>
            </div>
          </div>
        </div>
        <!-- <div class="flex shopBox">
          <img src="http://img-arch.pconline.com.cn/images/upload/upc/tx/photoblog/1104/11/c2/7278725_7278725_1302501879093_mthumb.jpg" alt="" class="shopImg" />
          <div class="shopDetail">
            <div class="flex justify-sb">
              <div class="shopDetailTit">文具盒</div>
              <div class="shopDetailPrice">¥ 497.90</div>
            </div>
            <div class="flex justify-sb shopDetailNum">
              <div>大 蓝色</div>
              <div>x10</div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="shopHJ">总计1商品 合计￥497.90</div>
    </div>
    <div class="form formPrice">
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">实付金额</div>
        <div class="formPriceR">¥497.90</div>
      </div>
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">商品总额</div>
        <div class="formPriceR">¥497.90</div>
      </div>
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">促销优惠</div>
        <div class="formPriceR">¥0.00</div>
      </div>
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">随机立减</div>
        <div class="formPriceR">¥0.00</div>
      </div>
      <div class="flex justify-sb">
        <div class="formPriceL">运费</div>
        <div class="formPriceR">¥0.00</div>
      </div>
    </div>
    <div class="form formPrice">
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">发票类型</div>
        <div class="">普票</div>
      </div>
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">发票抬头</div>
        <div class="">家有福利社</div>
      </div>
      <div class="flex justify-sb formPriceM">
        <div class="formPriceL">发票内容</div>
        <div class="">商品明细</div>
      </div>
      <div class="flex justify-sb">
        <div class="formPriceL">备注</div>
        <div class="">麻烦包装得紧实一些</div>
      </div>
    </div>
    <div class="emtry"></div>
    <div class="flex justify-end align-center butBox">
      <div class="detailBut" @click="onGoPage">再次购买</div>
      <div class="detailBut">删除订单</div>
      <div class="detailBut detailButR">联系客服</div>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    onGoPage() {
      this.$jump('/integral-shop')
    }
  }
}
</script>

<style scoped>
.page{
  background: #F2F2F2;
}
.form{
  padding: 20px;
  background: #fff;
}
.formView{
  padding: 20px;
  background: #F8F8F8;
  border-radius: 6px;
  line-height: 1rem;
}
.formTit{
  font-size: 24px;
  margin-bottom: 16px;
}
.formTitR{
  font-size: 28px;
  color: #000000;
}
.formTitM{
  margin-top: 28px;
}
/* 商品 */
.shop{
  margin-top: 20px;
}
.shopTop{
  width: 750px;
  height: 80px;
  background: #FFFFFF;
  font-size: 28px;
  color: #000000;
}
.shopTopImg{
  width: 36px;
  height: 36px;
  display: block;
  margin-left: 18px;
  margin-right: 16px;
}
.shopCont{
  background: #F8F8F8;
  padding: 20px 40px;
}
.shopBox{
  margin-top: 20px;
}
.shopImg{
  width: 110px;
  height: 110px;
  display: block;
  border-radius: 8px;
}
.shopDetail{
  margin-left: 20px;
  flex: 1;
}
.shopDetailTit{
  font-size: 26px;
  color: #000000;
}
.shopDetailPrice{
  font-size: 28px;
  color: #000000;
}
.shopDetailNum{
  font-size: 26px;
  color: #A7A7A7;
  margin-top: 18px;
}
.shopHJ{
  padding: 0 40px;
  height: 80px;
  line-height: 80px;
  background: #FFFFFF;
  font-size: 26px;
  text-align: right;
}
.formPrice{
  margin-top: 20px;
}
.formPriceL{
  font-size: 26px;
  color: #000000;
}
.formPriceR{
  font-size: 26px;
  color: #F35517;
}
.formPriceM{
  margin-bottom: 30px;
}
.emtry{
  width: 100%;
  height: 140px;
  background: #F2F2F2;
}
.butBox{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: #fff;
}
.detailBut{
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #D3D3D3;
  border-radius: 30px;
  color: #505050;
  font-size: 24px;
  margin-right: 12px;
}
.detailButR{
  margin-right: 20px;
}
</style>
